<template>
  <h1>一个人的信息</h1>
  姓:<input type="text" v-model="person.firstName"/><br>
  名:<input type="text" v-model="person.lastName"/><br>
  全名:<input type="text" v-model="person.fullName"/><br>


</template>

<script>
import {computed, reactive} from 'vue'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Demo',
  setup: function () {
    let person = reactive({
      firstName: '张',
      lastName: '三',
    })
    //计算属性
    person.fullName = computed({
      get: function () {
        return person.firstName + '-' + person.lastName;
      },
      set: function (newVal) {
        const newAry = newVal.split('-')
        person.firstName = newAry[0];
        person.lastName = newAry[1]
      }
    })
    //返回一个函数（常用）
    return {
      person: person,

    }
  }
}
</script>


